const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');//引入  
const webpack  = require('webpack')

module.exports = {
	entry: {
		//入口文件，如果不配置webpack4将自动查找src目录下的index.js文件
		index: './scripts/index.js'
	},
	output: {
		//输出文件名，[name]表示入口文件js名
		//[hash]会在后面生成随机hash值
		filename: '[name].bundle.[hash].js',
		//输出文件路径
		path: path.join(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|jpg|gif)$/,
				use: [{
					loader: 'url-loader',
					options: {
						//输出到images文件夹
						outputPath: 'images/',
						//是把小于500B的文件打成Base64的格式，写入JS
						limit: 500
					}
				}]
			}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({
			//输出文件名
			filename: 'index.html',
			//以当前目录下的index.html文件为模板生成dist/index.html文件
			template: './index.html'
		}),
		//传入数组,指定要删除的目录
		new CleanWebpackPlugin(['dist']),
		//热更新
		new webpack.HotModuleReplacementPlugin()
	],
	devServer: {
		inline:true,//打包后加入一个websocket客户端
	    hot:true,//热加载
	    contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
	    host: 'localhost',//主机地址
	    port: 9090,//端口号
	    compress: true//开发服务器是否启动gzip等压缩
	}
}